<template>
    <div class="notice-list" v-loading="loading">
        <common-list @resert="resert" @search="search" ref="commonListRef" :isShowTable="false">
            <template #btns>
                <div class="btns">
                    <w-button v-if="store.btns.find((item) => item.name === '生成计划明细')" class="config-btn" @click="generate">生成计划明细</w-button>
                </div>
            </template>
            <template #anotherWrapper>
                <div class="calendar">
                    <el-calendar v-model="timeData" ref="calendar">
                        <template #header="{ date }">
                            <ul class="planning">
                                <li class="normal">正常执行</li>
                                <li class="postpone">计划改期</li>
                                <li class="cancel">计划取消</li>
                            </ul>
                            <div class="topHeading">
                                <i class="iconfont icon-a-1" @click="selectDate('prev-month')"></i>
                                <span class="date">{{ date }}</span>
                                <i class="iconfont icon-a-" @click="selectDate('next-month')"></i>
                            </div>
                        </template>
                        <template #date-cell="{ data }">
                            <div @click="firstMaintain(data.day)" style="width: 100%; height: 100%">
                                {{ data.day.slice(-2) }}
                                <div style="width: 100%" v-for="(item, index) in matterData" :key="index">
                                    <div v-if="item.date.indexOf(data.day) != -1">
                                        <ul class="matter">
                                            <li
                                                :class="[{ postpone: itemData.state == 2, normal: itemData.state == 1, useless: itemData.state == 3 }]"
                                                v-for="(itemData, index) in item.itemList ? item.itemList.slice(0, 4) : item.itemList"
                                                :key="index"
                                            >
                                                {{ itemData.name.slice(0, 10) }}...
                                            </li>
                                        </ul>
                                        <div class="backlog" v-if="item.itemList.length > 4">还有{{ item.itemList.length - 4 }}项···</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-calendar>
                </div>
            </template>
        </common-list>
        <el-dialog v-model="gene" v-if="gene" title="生成计划明细" width="27%" :close-on-click-modal="false">
            <el-form :label-position="labelPosition" label-width="80px" :model="dataTime" :rules="geneRules" ref="geneRuleFormRef" style="max-width: 460px">
                <el-form-item label="设备编号" prop="equipmentId">
                    <el-select v-model="dataTime.equipmentId" placeholder="请选择设备编号">
                        <el-option v-for="item in equipmentData" :key="item.value" :label="item.name" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="时段" prop="dateCurrent">
                    <el-date-picker
                        v-model="dataTime.dateCurrent"
                        type="daterange"
                        unlink-panels
                        range-separator="To"
                        start-placeholder="请选择前置时间"
                        end-placeholder="请选择后置时间"
                        value-format="YYYY-MM-DD"
                        :disabled-date="disabledDate"
                        :disabled="isDisabled"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="gene = false">取消</el-button>
                    <el-button type="primary" @click="generateSubmit(geneRuleFormRef)">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { provide, reactive, ref, onMounted, watch } from "vue";
import commonList from "@/components/commonList.vue";
import { formConfig, geneRules } from "./config";
import { getPlanManagement, getQuipmentCode, getPlanCycletype, getPlanState, getPlandetail, getDeadline } from "@/service/api/planManagement.js";
import { useRouter } from "vue-router";
import { mainStore } from "@/store/main.js";

const store = mainStore();
const loading = ref(false);
const calendar = ref();
const gene = ref(false);
const geneRuleFormRef = ref();
const timeData = ref(new Date());
const router = useRouter();
const commonListRef = ref(null);
const formData = reactive({ equipmentId: null, planCycleType: null, planCycleState: "", monthDay: "", dateCurrent: "" });
const matterData = ref();
const deadlineData = ref();
const dataTime = ref({
    equipmentId: "",
    dateCurrent: ""
});
const dataQuantum = reactive({
    startDate: "",
    endDate: "",
    equipmentId: ""
});
const equipmentData = ref();
const isDisabled = ref(false);

const selectDate = (val) => {
    calendar.value.selectDate(val);
    formData.monthDay = timeData.value.getFullYear() + "-" + (timeData.value.getMonth() + 1 < 10 ? "0" + (timeData.value.getMonth() + 1) : timeData.value.getMonth() + 1) + "-" + "01";
    GetPlan();
};
// 点击跳转
const firstMaintain = (val) => {
    const equipmentCode = formConfig[0].options.find((item) => item.value == formData.equipmentId) == undefined ? "" : formConfig[0].options.find((item) => item.value == formData.equipmentId).label;
    const cycleTypeName =
        formConfig[1].options.find((item) => item.value == formData.planCycleType) == undefined ? "" : formConfig[1].options.find((item) => item.value == formData.planCycleType).label;
    router.push({
        path: "/main/planManagement/firstMaintain",
        query: {
            execDate: val,
            equipmentId: formData.equipmentId,
            equipmentCode: equipmentCode,
            cycleTypeName: cycleTypeName,
            planCycleType: formData.planCycleType,
            maintenanceType: 1
        }
    });
};
onMounted(() => {
    formData.monthDay = timeData.value.getFullYear() + "-" + (timeData.value.getMonth() + 1 < 10 ? "0" + (timeData.value.getMonth() + 1) : timeData.value.getMonth() + 1) + "-" + "01";
    GetPlan();
});
function GetPlan() {
    loading.value = true;
    delete formData.dateCurrent;
    getPlanManagement(formData).then((res) => {
        loading.value = false;
        if (res.code === 200) {
            matterData.value = res.data;
        }
    });
}

getQuipmentCode().then((res) => {
    if (res.code === 200) {
        formConfig[0].options = res.data.map((item) => ({
            label: item.name,
            value: item.value
        }));
        equipmentData.value = res.data;
    }
});
getPlanCycletype().then((res) => {
    if (res.code === 200) {
        formConfig[1].options = res.data.map((item) => ({
            label: item.name,
            value: item.value
        }));
    }
});
getPlanState().then((res) => {
    if (res.code === 200) {
        formConfig[2].options = res.data.map((item) => ({
            label: item.name,
            value: item.value
        }));
    }
});
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};
const generate = () => {
    dataTime.value = {
        equipmentId: "",
        dateCurrent: ""
    };
    isDisabled.value = true;
    gene.value = true;
    watch(
        () => dataTime.value.equipmentId,
        (news) => {
            dataTime.value.dateCurrent = "";
            if (news !== "" && news !== undefined) {
                getDeadline(news).then((res) => {
                    if (res.code === 200) {
                        deadlineData.value = res.data;
                    }
                });
                dataQuantum.equipmentId = news;
                isDisabled.value = false;
            }
        }
    );
};

const disabledDate = (time) => {
    if (!deadlineData.value) {
        return false;
    } else {
        return time.getTime() < new Date(deadlineData.value.slice(0, 10)).getTime();
    }
};
const generateSubmit = () => {
    if (!geneRuleFormRef.value) return;
    geneRuleFormRef.value
        .validate((valid) => {
            if (valid) {
                const loadingInstance = ElLoading.service();
                dataQuantum.startDate = dataTime.value.dateCurrent[0];
                dataQuantum.endDate = dataTime.value.dateCurrent[1];
                getPlandetail(dataQuantum).then((res) => {
                    loadingInstance.close();
                    if (res.code === 200) {
                        gene.value = false;
                        ElMessage.success("生成成功！");
                        GetPlan();
                    } else {
                        gene.value = false;
                        ElMessage.error(res.message);
                    }
                });
            }
        })
        .catch((err) => {
            loadingInstance.close();
        });
};
const search = () => {
    GetPlan();
};
provide("formData", formData);
provide("formConfig", formConfig);
provide("title", "计划明细");
</script>

<style lang="less" scoped>
.notice-list {
    height: 100%;
    :deep(.wrapper-left) {
        height: auto !important;
    }
    .calendar {
        height: calc(100% - 75px);
        overflow: auto;
        .planning {
            display: flex;
            color: #595959;
            font-size: smaller;
            li {
                margin-right: 35px;
            }
            .normal::marker {
                color: #a0d911;
                font-size: larger;
            }
            .postpone::marker {
                color: #ffc53f;
                font-size: larger;
            }
            .cancel::marker {
                color: #ff4d4f;
                font-size: larger;
            }
        }
        .topHeading {
            display: flex;
            align-items: center;
            margin-right: 44%;
            .iconfont {
                cursor: pointer;
            }
            .date {
                margin: 0 10px 0 10px;
            }
        }
        .matter {
            display: block;
            margin: 3px 0 0 -23px;
            color: #595959;
            font-size: 12px;
            li {
                margin-bottom: 5px;
            }
            .normal::marker {
                color: #a0d911;
                font-size: larger;
            }
            .postpone::marker {
                color: #ffc53f;
                font-size: larger;
            }
            .useless {
                text-decoration: line-through;
            }
            .useless::marker {
                color: #ff4d4f;
                font-size: larger;
            }
        }
        .backlog {
            height: 17px;
            background: #ecf1f3;
            display: flex;
            padding-left: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #8c8c8c;
            line-height: 17px;
        }
    }
    :deep(.el-calendar-table tr td:first-child) {
        background-color: rgba(235, 235, 235, 0.4);
    }
    :deep(.el-calendar-table tr td:last-child) {
        background-color: rgba(235, 235, 235, 0.4);
    }
    :deep(.el-calendar-day) {
        height: 140px;
    }
    :deep(.el-calendar-table td.is-today) {
        color: #3b41ff;
    }
    .btns {
        display: flex;
        .resert {
            border: 1px solid @main-color;
            color: @main-color;
        }
        .config-btn {
            width: 110px;
        }
    }
}
</style>
